<template>
  <div style="width: 1000px;margin: 20px auto">
    <el-table :data="tableData" stripe border style="width: 100%">
      <el-table-column prop="title" label="车展" header-align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="orderNo" label="订单号" width="230" header-align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="totalNum" label="购票总数" width="80" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="totalPrice" label="总价" width="80" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="buyTime" label="购票时间" width="180" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="notes" label="备注" width="100" header-align="center" show-overflow-tooltip></el-table-column>

      <el-table-column label="操作" width="120" align="center">
        <template slot-scope="scope">
          <el-button size="small"
                     @click="openDetailConfirm(scope.row)">订单详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 10px auto;text-align: right;">
      <el-pagination
          @current-change="changePageNum"
          layout="total, prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :current-page="currentPage">
      </el-pagination>
    </div>

    <el-dialog title="订单详情" :visible.sync="dialogFormVisible">
      <el-table :data="tableData2" stripe border style="width: 100%">
        <el-table-column prop="id" label="ID" width="100" align="center"></el-table-column>
        <el-table-column prop="num" label="购票数" width="100" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="price" label="票价" width="100" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="payStatus" label="支付状态" :formatter="statusFormatter" header-align="center" show-overflow-tooltip></el-table-column>

        <el-table-column label="操作" width="150" align="center">
          <template slot-scope="scope">
            <el-button size="small" :disabled="scope.row.payStatus != 1 && scope.row.payStatus != 4"
                       @click="handleRefund(scope.row)">申请退票</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import global from '../../Global'
let preAdminUrl = global.preAdmins;
let preTicketOrderUrl = global.preTicketOrders ;
let preTicketListUrl = global.preTicketLists;
export default {
  data() {
    return {
      dialogFormVisible: false,
      tableData: [],
      tableData2: [],
      total: 0,
      pageSize: 0,
      currentPage: 1,
      admin:{},
      payStatusText: ["未付款", "已付款", "待退款", "已退款", "退款失败"]
    }
  },
  methods: {
    statusFormatter(row, column){
      return this.payStatusText[row.payStatus];
    },
    handleRefund(tickList){
      let url = preTicketListUrl + "/" + tickList.id + "/pay-paid";

      let localJwt = localStorage.getItem('localJwt');
      this.axios.create({'headers': {'Authorization': localJwt}})
          .post(url).then((response) => {
        let jsonResult = response.data;
        if(jsonResult.state == 20000){
          this.$notify.success({title: '成功',
            message: '退款申请完成'
          });
          this.dialogFormVisible = false;
        }else if(jsonResult.state == 40400){
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
              this.dialogFormVisible = false;
            }
          });
        }else{
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
              this.dialogFormVisible = false;
            }
          });
        }
      });
    },
    openDetailConfirm(ticketOrder){
      let url = preTicketListUrl + "/order/" + ticketOrder.id;

      let localJwt = localStorage.getItem('localJwt');
      this.axios.create({'headers': {'Authorization': localJwt}})
          .get(url).then((response) => {
        let jsonResult = response.data;
        if(jsonResult.state == 20000){
          this.tableData2 = jsonResult.data;
          this.dialogFormVisible = true;
        }else if(jsonResult.state == 40400 || jsonResult.state == 40100 ){
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
              localStorage.removeItem("localJwt");
              this.$router.push("/webLogin");
            }
          });
        }else{
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    //分页——翻页
    changePageNum(value){
      this.$router.replace("?pageNum="+value);
      this.loadTicketOrderList();
    },
    //加载车展列表
    loadTicketOrderList(){
      let pageNum = this.$router.currentRoute.query.pageNum;
      if(!pageNum){
        pageNum = 1;
      }
      let url = preTicketOrderUrl+"/user/" + this.admin.id + "?pageNum="+ pageNum;

      let localJwt = localStorage.getItem('localJwt');
      this.axios.create({'headers': {'Authorization': localJwt}})
          .get(url).then((response) => {
        let jsonResult = response.data;
        if(jsonResult.state == 20000){
          this.tableData = jsonResult.data.list;
          this.total = jsonResult.data.total;
          this.pageSize = jsonResult.data.pageSize;
          this.currentPage = jsonResult.data.currentPage;
        }else if(jsonResult.state == 40400 || jsonResult.state == 40100){
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
              this.dialogFormVisible = false;
              localStorage.removeItem("localJwt");
              this.$router.push("/webLogin");
            }
          });
        }else{
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    //加载订单下票单列表
    /*loadTicketList(){
      let pageNum = this.$router.currentRoute.query.pageNum;
      if(!pageNum){
        pageNum = 1;
      }

      let url = preTicketListUrl+"/pay-refund?pageNum="+ pageNum;
      let localJwt = localStorage.getItem('localJwt');
      this.axios.create({'headers': {'Authorization': localJwt}})
          .get(url).then((response) => {
        let jsonResult = response.data;
        if(jsonResult.state == 20000){
          this.tableData = jsonResult.data.list;
          this.total = jsonResult.data.total;
          this.pageSize = jsonResult.data.pageSize;
          this.currentPage = jsonResult.data.currentPage;
        }else{
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },*/
    loadLoginPrincipal(){
      let url = preAdminUrl + "/index";

      let localJwt = localStorage.getItem('localJwt');
      this.axios.create({'headers': {'Authorization': localJwt}})
          .get(url).then((response) => {
        let jsonResult = response.data;
        if(jsonResult.state == 20000){
          this.admin = jsonResult.data;
          this.loadTicketOrderList();
        }else{
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  mounted() {
    this.loadLoginPrincipal();
  }
}
</script>
